<template>
  <div class="retrieve-password">
    <div>
      <svg viewBox="0 0 1000 1000" class="demo-nav__back" @click="toBack">
        <path fill-rule="evenodd" fill="#969799" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path>
      </svg>
    </div>
    <div class="retrieve-password-he">
      <h1>找回密码</h1>
      <p>为了您的账户安全,1天只能操作1次,否则账户将会被锁定无法登陆</p>
    </div>
    <div class="retrieve-password-input">
      <van-row type="flex" justify="center">
        <van-col span="4">
          <div style="text-align: center;height: 44px;line-height: 44px;background-color: #ebedf0">+86</div>
        </van-col>
        <van-col span="20">
          <van-form id="loginCode" validate-first>
            <!-- 通过 pattern 进行正则校验 -->
            <van-field v-model="form.loginName" name="pattern" placeholder="请输入手机号" :rules="[{ pattern, message: '请输入正确手机号' }]" style="border-left: 1px solid #ccc;background-color: #ebedf0"/>
          </van-form>
        </van-col>
      </van-row>
      <van-button type="primary" size="large" style="margin-top: 2rem;border-radius: 0.5rem" @click="retieve">完成</van-button>
    </div>
  </div>
</template>

<script>

  import { getPhoneCode } from "@/api/login.js";
  import local from '@/utils/localStorage.js';

  export default {
    name: "retrieve_password",
    data(){
      return{
        pattern: /^1[35789]\d{9}$/,
        form:{}
      }
    },
    created() {
      this.form = {
        loginName:null
      }
    },
    methods: {
      toBack(){
        this.$router.go(-1);//返回上一层
      },
      retieve(){
        getPhoneCode(this.form).then((res) => {
          this.$router.push({path:"/verification_code",query:{code:res.data.code,phone:this.form.loginName}});
        });
      }
    }
  }
</script>

<style scoped>
  .retrieve-password{
    color: black;
    text-align: left;
  }
  .demo-nav__back{
    position: absolute;
    top: 16px;
    left: 16px;
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  .retrieve-password-he h1{
    font-size: 1.5rem;
    padding: 1rem;
    text-align: left;
    margin-top: 30%;
  }
  .retrieve-password-he p{
    font-size: 0.7rem;
    padding: 0 1rem;
    color: #999999;
  }
  .retrieve-password-input{
    padding: 1rem;
  }
  .retrieve-password-input .input{
    border-left: 1px solid #ccc;
    background-color: #ebedf0;
    margin: 0.8rem 0;
  }
</style>
